<template>
  <div class="header">
    <div class="header-left">
      <div class="title">时间筛选</div>
      <div class="dateItem" :class="{active: activeType == item.date_type}" v-for="item in dates" :key="item.date_type" @click="selectType(item)">{{item.name}}</div>
      <div class="defined" v-if="activeType == 5">
        <el-date-picker
          :editable="false"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD HH:mm:ss"
          v-model="definedDate"
          type="daterange"
          range-separator="—"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          prefix-icon="Calendar"
          :disabledDate="disabledDate"
          @calendar-change="handleChange"
          @focus="handleFocus"
        />
      </div>
    </div>
    <div class="header-right">
      <el-button type="primary" @click="search">查询</el-button>
      <el-button @click="clear">清空</el-button>
    </div>
  </div>
</template>

<script setup lang="tsx">
import { reactive, ref, watch, computed, onMounted } from 'vue'
import router from '@/router'
import {getStoreList, getTotleData, getConverse, getProductTop, getSales} from '@/api/ecommerce/storeManage'

const props = defineProps(["query"]);

const emit = defineEmits(['search'])

let activeType = ref<number>(2)
const definedDate = ref<any>([])

const pickDay = ref()
const impose = ref(180)

const dates = reactive<any>([
  {
    date_type: 1,
    name: '昨天',
    start_date: '',
    end_date: ''
  },
  {
    date_type: 2,
    name: 'WTD',
    start_date: '',
    end_date: ''
  },
  {
    date_type: 3,
    name: 'MTD',
    start_date: '',
    end_date: ''
  },
  {
    date_type: 4,
    name: 'YTD',
    start_date: '',
    end_date: ''
  },
  {
    date_type: 5,
    name: '自定义',
    start_date: '',
    end_date: ''
  }
  
])

const selectType = (item:any)=>{
  const {date_type} = item
  activeType.value = date_type
  dates.find((ite:any) => {
    if(ite.date_type == date_type){
      switch(date_type){
        case 1:
          const {start_date: start_date1, end_date: end_date1} = initYestoday()
          ite.start_date = start_date1
          ite.end_date = end_date1
        break;
        case 2:
          const {start_date: start_date2, end_date: end_date2} = initWTD()
          ite.start_date = start_date2
          ite.end_date = end_date2
        break;
        case 3:
          const {start_date: start_date3, end_date: end_date3} = initMTD()
          ite.start_date = start_date3
          ite.end_date = end_date3
        break;
        case 4:
          const {start_date: start_date4, end_date: end_date4} = initYTD()
          ite.start_date = start_date4
          ite.end_date = end_date4
        break;
      }
      return true
    }else{
      return false
    }
  });

}

const search = ()=>{
  const shop_id = [props.query.shop_id]
  const date_type = activeType.value
  // let start_date = ''
  // let end_date = ''
  let date:any = []
  dates.find((item:any):boolean => {
    if(item.date_type == date_type){
      // start_date = item.start_date
      // end_date = item.end_date
      date = [item.start_date,item.end_date]
      // date = []
      return true
    }else{
      return false
    }
  })
  let params = {shop_id, date_type, date}
  // let params = {shop_id, date_type, start_date, end_date}
  if(activeType.value == 5){
    // params.start_date = definedDate.value[0] || ''
    // params.end_date = definedDate.value[1] || ''
    params.date = [definedDate.value[0] || '',definedDate.value[1] || '']
  }
  emit('search', params)
}

const initYestoday = ():any=>{
  return initT(-1)
}
const initWTD = ():any=>{
  let num = 0
  const week = new Date().getDay()
  switch(week){
    case 0:
      num = 6
    break;
    case 1:
    case 2:
    case 3:
    case 4:
    case 5:
    case 6:
      num = week - 1
    break;

  }
  return initT(1000 * 60 * 60 * 24 * num)
}
const initMTD = ():any=>{
  const day = new Date().getDate()
  return initT(1000 * 60 * 60 * 24 * (day - 1))
}
const initYTD = ():any=>{
  const year_day = calcYearDay()
  return initT(1000 * 60 * 60 * 24 * (year_day - 1))
}

const calcYearDay = ()=>{
  const month = new Date().getMonth() + 1
  const day = new Date().getDate()
  let num = day;
  if (month == 1) {
      return day;
  }
  const monthDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  for (let i = 0; i < month - 1; i++) {
      num = num + monthDay[i]
  }
  if (isfullyear() && month > 2) {
      num++;
  }
  return num;
}
const isfullyear = ()=>{
  const year = new Date().getFullYear()
  if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
      return true;
  }
}

const initT = (timeStamp:number):any=>{
  let timeStamp_ = timeStamp
  const today = new Date().getTime()
  const yestoday = new Date(today - 1000 * 60 * 60 * 24)
  if(timeStamp < 0){
    timeStamp_ = 1000 * 60 * 60 * 24
  }
  const lastday = new Date(today - timeStamp_)
  const lastday_year = lastday.getFullYear()
  let  lastday_month:(string|number) = lastday.getMonth() + 1
  let lastday_day:(string|number) = lastday.getDate()
  lastday_month = lastday_month > 9 ? lastday_month : `0${lastday_month}`
  lastday_day = lastday_day > 9 ? lastday_day : `0${lastday_day}`

  const today_year = new Date().getFullYear()
  let  today_month:(string|number) = new Date().getMonth() + 1
  let today_day:(string|number) = new Date().getDate()
  today_month = today_month > 9 ? today_month : `0${today_month}`
  today_day = today_day > 9 ? today_day : `0${today_day}`

  const yesday_year = yestoday.getFullYear()
  let  yesday_month:(string|number) = yestoday.getMonth() + 1
  let yesday_day:(string|number) = yestoday.getDate()
  yesday_month = yesday_month > 9 ? yesday_month : `0${yesday_month}`
  yesday_day = yesday_day > 9 ? yesday_day : `0${yesday_day}`
  
  const start_date = `${lastday_year}-${lastday_month}-${lastday_day} 00:00:00`
  const end_date_yestoday = `${yesday_year}-${yesday_month}-${yesday_day} 23:59:59`
  const end_date = `${today_year}-${today_month}-${today_day} 23:59:59`
  if(timeStamp >= 0){
    return {start_date, end_date}
  }else{
    return {start_date, end_date: end_date_yestoday}
  }
}

const disabledDate = (time: number) => {
  if (!pickDay.value) {
    return false
  }
  if (impose.value) {
    const con1 = new Date(pickDay.value).getTime() - impose.value * 24 * 60 * 60 * 1000
    const con2 = new Date(pickDay.value).getTime() + impose.value * 24 * 60 * 60 * 1000
    return time < con1 || time > con2
  }
  return false
}
const handleChange = (val: Date[]) => {
  if (impose.value) {
    const [pointDay] = val
    pickDay.value = pointDay
  }
}
const handleFocus = () => {
  pickDay.value = null
}



const clear = ()=>{
  selectType(dates[1])
  search()
}


onMounted(()=>{
  selectType(dates.find((item:any):boolean=>item.date_type == activeType.value))
  search()
})


</script>
<style scoped lang="scss">
  .header{
    display: flex;
    justify-content: space-between;
    .header-left{
      display: flex;
      align-items: center;
      justify-content: center;
      .title{
        margin-right: 10px;
        white-space: nowrap;
      }
      .dateItem{
        border-radius: 6px;
        border: 1px solid #ddd;
        color: #666;
        padding: 6px 10px;
        margin-right: 10px;
        white-space: nowrap;
        &:hover{
          border-color: #FF6B00;
          color: #FF6B00;
          cursor: pointer;
        }
      }
      .active{
        border-color: #FF6B00;
        color: #FF6B00;
        cursor: pointer;
      }
      .defined{

      }
      
    }
    .header-right{
      margin-left: 16px;
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      

    }

  }

</style>
